/*
* @Author: zhangmeng
* @Date: 2020-06-22 15:21:44
 * @Last Modified by: zhangmeng
 * @Last Modified time: 2020-07-20 15:07:49
*/
<template>
  <div class="class-wrap" :style="{height:classType == 12?scrollerHeight+40 + 'px' :''}">
    <!-- 搜索区域模块 -->
    <div class="class-wrap-search" id="class-wrap-search" ref="search">
      <div class="class-wrap-search-cont">
        <input type="text" v-model="keywords" placeholder="商品/店铺名称" @confirm="searchList">
        <div class="icon miniprogram" @click="searchList">
          <img class="img_search" src="https://img.wifenxiao.com/h5-wfx/images/common/search-icon.png" />
        </div>
      </div>
    </div>
    <!-- 定制新分类 type:12 start -->
    <dz-classification v-if="classType == 12" :dzData='dzData' :searchOffsetHeight="searchOffsetHeight" :scrollerHeight="scrollerHeight" />
    <!-- 定制新分类 type:12 end -->

    <!-- 带左栏三级分类展示-一级分类 -->
    <div class="class-wrap-top" ref="topNav" v-if="classType == 9">
      <div class="class-wrap-top-drop" @click="topDrop">
        <img class="arrow" :class="isShowDropBox?'drop':''" src="https://img.wifenxiao.com/h5-wfx/images/class_down.png" alt="向下箭头" mode="scaleToFill">
      </div>
      <div class="class-wrap-top-dropbox" id="class-wrap-top-dropbox" @click.stop="isDropBox" v-show="isShowDropBox">
        <ul class="class-wrap-top-dropcont">
          <li class="class-wrap-top-dropcont-item" :class="[item.class_id === activeId ? 'active':'']" v-for="(item,index) in topData" :key="item.class_id" @click.stop="topDropItem(item.class_id,index)">{{item.class_name}}</li>
        </ul>
      </div>
      <div class="class-wrap-nine">
        <ul class="class-wrap-top-cont" ref="classWrapNine" :style="classWrapStyle">
          <li class="class-wrap-top-cont-item" :class="[item.class_id === activeId ? 'active':'']" v-for="item in topData" :key="item.class_id" @click="switchTopItem(item.class_id)"><span>{{item.class_name}}</span></li>
        </ul>
      </div>
    </div>
    <!-- 商品分类样式 -->
    <div class="class-wrap-level" v-if="classType == 2 || classType == 3 || classType == 7">
      <!-- 文字列表展示 -->
      <div class="class-wrap-level-level2" v-if="classType == 2">
        <ul :style="{'padding-bottom':navBarHeight + 'px'}">
          <li class="class-wrap-level-level2-item" v-for="item in leftData" :key="item.class_id">
            <div class="level-title"><span>{{item.class_name}}</span></div>
            <ul class="level-cont" v-if="item.child && item.child.length > 0">
              <li class="level-cont-item" v-for="items in item.child" :key="items.class_id" @click="navToItemList(items)"><span>{{items.class_name}}</span></li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- 一级分类图标展示 -->
      <div class="class-wrap-level-level3" v-if="classType == 3">
        <ul class="level3-cont" :style="{'padding-bottom':navBarHeight + 'px'}">
          <li class="level3-cont-item" v-for="item in leftData" :key="item.class_id" @click="navToItemList(item)">
            <div class="img"><img :src="item.class_img ? item.class_img:defaultImg" alt=""></div>
            <div class="name"><span>{{item.class_name}}</span></div>
          </li>
        </ul>
      </div>
      <!-- 两级分类展示 -->
      <div class="class-wrap-level-level7" v-if="classType == 7">
        <ul :style="{'padding-bottom':navBarHeight + 'px'}">
          <li class="class-wrap-level-level7-item" v-for="item in leftData" :key="item.class_id">
            <div class="level-title"><span>{{item.class_name}}</span></div>
            <ul class="level-cont" v-if="item.child && item.child.length > 0">
              <li class="level-cont-item" v-for="items in item.child" :key="items.class_id" @click="navToItemList(items)"><span>{{items.class_name}}</span></li>
            </ul>
          </li>
        </ul>
      </div>

      <div v-show="isShowNoData2">
        <no-data :noData="noData"></no-data>
      </div>
    </div>
    <!-- 数据展示模块 -->
    <div class="class-wrap-cont" :class="classType == 9 ? 'classType_nine' : ''" v-if="classType == 0 || classType == 1 || classType == 4 || classType == 6 || classType == 8 || classType == 9 || classType == 10">
      <!-- 带左栏三级分类展示-二级分类 -->
      <div class="class-wrap-cont-left" :style="{height:scrollerHeight + 'px'}" v-if="classType == 9">
        <ul class="class-left-cont">
          <li class="class-left-cont-item" :class="[item.class_id === leftActiveId ? 'active':'']" v-for="item in leftData" :key="item.class_id" @click="switchClassItem(item.class_id)"><span>{{item.class_name}}</span></li>
        </ul>
      </div>
      <!-- 左侧展示模块 -->
      <div class="class-wrap-cont-left" :style="{height:scrollerHeight + 'px'}" v-else>
        <ul class="class-left-cont">
          <li class="class-left-cont-item" :class="[item.class_id === activeId ? 'active':'']" v-for="item in leftData" :key="item.class_id" @click="switchClassItem(item.class_id)"><span>{{item.class_name}}</span></li>
        </ul>
      </div>
      <!-- 右侧展示模块 -->
      <div class="class-wrap-cont-right" :style="{height:scrollerHeight + 'px'}">
        <ul class="class-level0" v-if="classType == 0">
          <li class="class-level0-item" v-for="item in rightData" :key="item.class_id" @click="navToItemList(item)">
            <div class="img"><img :src="item.class_img ? item.class_img:defaultImg" alt=""></div>
            <div class="name"><span>{{item.class_name}}</span></div>
            <div class="arrow"><img src="https://img.wifenxiao.com/h5-wfx/images/order/peer_row.png" alt=""></div>
          </li>
        </ul>
        <!-- 图标橱窗展示（二级） -->
        <ul class="class-level1" v-if="classType == 1">
          <li class="class-level1-item" v-for="item in rightData" :key="item.class_id" @click="navToItemList(item)">
            <div class="img"><img :src="item.class_img ? item.class_img:defaultImg" alt=""></div>
            <div class="name"><span>{{item.class_name}}</span></div>
          </li>
        </ul>
        <!-- 图标橱窗展示·2 -->
        <ul class="class-level6" v-if="classType == 6">
          <li class="class-level6-item" v-for="item in rightData" :key="item.class_id">
            <div class="class-level6-item-name"><span>{{item.class_name}}</span></div>
            <ul class="class-level6-item-cont" v-if="item.child && item.child.length > 0">
              <li class="class-level6-item-cont-item" v-for="items in item.child" :key="items.class_id" @click="navToItemList(items)">
                <span>{{items.class_name}}</span>
              </li>
            </ul>
          </li>
        </ul>
        <!-- 图标橱窗展示(三级) -->
        <ul class="class-level6" v-if="classType == 8">
          <li class="class-level6-item" v-for="item in rightData" :key="item.class_id">
            <div class="class-level6-item-name" @click="navToItemList(item)"><span>{{item.class_name}}</span></div>
            <ul class="class-level6-item-cont" v-if="item.child && item.child.length > 0">
              <li class="class-level8-item" v-for="items in item.child" :key="items.class_id" @click="navToItemList(items)">
                <div class="img"><img :src="items.class_img ? items.class_img:defaultImg" alt=""></div>
                <div class="name"><span>{{items.class_name}}</span></div>
              </li>
            </ul>
          </li>
        </ul>
        <!-- 带左栏三级分类展示-筛选 -->
        <div class="sort" v-if="classType == 9">
          <div class="sort-item">
            <!--排序搜索-->
            <sort-search @item="sortSearchFn" :typeList="typeList"></sort-search>
          </div>
        </div>
        <!-- 带左栏三级分类展示-三级分类 -->
        <div class="class-level9" v-if="classType == 9">
          <ul class="class-level9-cont">
            <li class="class-level9-cont-item" :class="[item.class_id === classThreeId ? 'active':'']" v-for="item in classThreeData" :key="item.class_id" @click="classThreeItem(item.class_id)">{{item.class_name}}</li>
          </ul>
        </div>
        <!-- 分类商品展示 -->
        <ul class="class-level4" v-if="classType == 4" v-show="!isShowNoData">
          <!-- TODO 小程序使用微信组件滚动 -->
          <wx-scroll-view :scroll-y="canScrollY" @scrolltolower="onLoad" :style="{height:scrollerHeight + 'px'}">
            <li class="class-level4-item" v-for="item in goodList" :key="item.item_id" @click="navToDetail(item.item_id)">
              <div class="class-level4-item-img" :class="item.pic_url ? '' : 'imgBorder'">
                <img :src="item.is_compress == 1 ? item.pic_url + '480x480':item.pic_url" alt="">
                <div class="item-sold-bg" v-if="item.num <= 0"></div>
                <div class="item-sold-out" v-if="item.num <= 0">
                  <span class="em">已售罄</span>
                </div>
              </div>
              <div class="class-level4-item-cont">
                <div class="title"><span>{{item.title}}</span></div>
                <div class="cont_box">
                  <div class="price" v-if="dhsOriginalPriceShow != 1" v-html="scaleGoodsPriceFn(item.price, 'nowprice')"></div>
                  <div class="price" v-else v-html="scaleGoodsPriceFn(item.o_price, 'nowprice')"></div>
                  <div class="right_box">
                    <div class="right" @click.stop="getItemSku(item.item_id)"><img src="https://img.wifenxiao.com/h5-wfx/images/item/list/cart.png" alt=""></div>
                  </div>
                </div>
              </div>
            </li>
          </wx-scroll-view>
        </ul>
        <!-- 分类商品加购展示 -->
        <ul class="class-level4" v-if="classType == 10" v-show="!isShowNoData">
          <!-- TODO 小程序使用微信组件滚动 -->
          <wx-scroll-view :scroll-y="canScrollY" @scrolltolower="onLoad" :style="{height:scrollerHeight + 'px'}">
            <li class="class-level4-item" v-for="(item, goodIndex) in goodList" :key="goodIndex">
              <div class="class-level4-item-img" @click="navToDetail(item.item_id)">
                <img :src="item.is_compress == 1 ? item.pic_url + '480x480':item.pic_url" alt="">
                <div class="item-sold-bg" v-if="item.num <= 0"></div>
                <div class="item-sold-out" v-if="item.num <= 0">
                  <span class="em">已售罄</span>
                </div>
              </div>
              <div class="class-level4-item-cont">
                <div class="title" @click="navToDetail(item.item_id)"><span>{{item.title}}</span></div>
                <div class="cont_box">
                  <div class="price" @click="navToDetail(item.item_id)" v-if="dhsOriginalPriceShow != 1" v-html="scaleGoodsPriceFn(item.price, 'nowprice')"></div>
                  <div class="price" @click="navToDetail(item.item_id)" v-else v-html="scaleGoodsPriceFn(item.o_price, 'nowprice')"></div>
                  <div class="right_box" v-if="!item.prescription_drugs">
                    <div class="add_cart">
                      <div v-if="item.has_sku" class="right_ten" @click.stop="getItemSku(item.item_id)">选规格</div>
                      <div v-else-if="!item.is_chaining">
                        <count-plug v-if="currentActive == goodIndex" :itemId="item.item_id" :minLimit="0" v-model="selNum" @changeNum="addCartChange(arguments)"></count-plug>
                        <div v-else class="icon" @click.stop="addShow(goodIndex)"><img src="https://img.wifenxiao.com/h5-wfx/images/item/shop-car/cart_add.png" alt=""></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </wx-scroll-view>
        </ul>
        <!-- 分类商品展示 -->
        <div class="list-wrapper-app" v-if="classType == 9">
          <wx-scroll-view :scroll-y="canScrollY" @scrolltolower="getData" :style="{height:scrollerHeight + 'px'}">
            <item-wrapper :dhsOriginalPriceShow="dhsOriginalPriceShow" :itemList="goodList" :listStyle="true" :otherInfo="otherInfo" :vanList="vanList" :isShowNoData="isShowNoData" @scrollReachBottom="getData" :classGoodMini="true"></item-wrapper>
          </wx-scroll-view>
        </div>
        <div v-if="classType != 9" v-show="isShowNoData">
          <no-data :noData="noData"></no-data>
        </div>
      </div>

    </div>
    <!--sku弹层-->
    <sku-dialog :visible.sync="skuDialogVisible" :itemId="itemId"></sku-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import { getItemClass, getClassItem, setCartItemNum } from '@/api/item/item.js'
import { scaleGoodsPrice } from '@/utils/index.js'
import { openPage } from '@/utils/utils.js'
import skuDialog from '../../components/skuDialog'
import sortSearch from '../../itemList/listWrapper/sortSearch'
import itemWrapper from '../../itemList/listWrapper/itemWrapper'
import noData from '@/components/noData/index'
import CountPlug from '@/components/CountPlug'
import dzClassification from './dzClassification'
import { List } from 'vant'
import { setTimeout } from 'timers'
import { mpShare } from "@/utils/utils";
import small from "@/smallapp/small";
Vue.use(List)
export default Vue.extend({
  components: {
    skuDialog,
    sortSearch,
    itemWrapper,
    noData,
    CountPlug,
    dzClassification
  },
  data() {
    return {
      dzData: [],
      canScrollY: true, // 是否允许小程序y轴滚动
      finishedText: '',
      isShowNoData: false,
      isShowNoData2: false,
      noData: {
        text: '暂无数据',
        img: 'https://img.wifenxiao.com/h5-wfx/images/no_goods.png',
        width: '214px',
        marginTop: '60px',
        txtMarginTop: '-30px'
      },
      keywords: '',
      itemId: 0,
      skuDialogVisible: false,
      isShowDropBox: false,
      scrollerHeight: window.innerHeight,
      navBarHeight: 0,
      defaultImg: 'https://img.wifenxiao.com/h5-wfx/images/default_goods_img.jpg',
      classType: '',
      activeId: 1,
      leftData: [],
      rightData: [],
      goodList: [],
      loading: false,
      finished: false,
      offset: 20,
      immediateCheck: false,
      p: 1,
      supplier: 0, // 供应商id
      // 带左栏三级分类展示
      classId: 1,
      topId: 1,
      leftActiveId: 1,
      classThreeId: 1,
      dhsOriginalPriceShow: '', // 是否展示原价
      topData: [],
      classThreeData: [],
      order: undefined, // priceUp,priceDown,salesDown,salesUp,newUp,newDown
      typeList: [
        { label: '默认', active: true, type: 0, prop: 'default', sort: 'none' },
        { label: '价格', active: false, type: 1, prop: 'price', sort: '' },
        { label: '销量', active: false, type: 2, prop: 'sales', sort: '' },
        { label: '新品', active: false, type: 3, prop: 'new', sort: '' }
      ],
      otherInfo: {
        earn_alias: '',
        is_open_kuajing: '',
        is_display_original_price: '',
        point_name: ''
      },
      vanList: {
        loading: false,
        error: false,
        finished: false
      },
      classWrapStyle: {},
      // 分类商品加购展示
      selNum: 0,
      currentActive: -1,
      searchOffsetHeight: 0
    }
  },
  created() {
    const sendData = {}
    const $query = this.$route.query
    if ($query.supplier) {
      sendData.supplier = $query.supplier
      this.supplier = $query.supplier
    }
    // TODO 小程序分享
    const option = {
      title: '商品分类',
      shareParam: `sid=${
        small.globalData.shopId
      }&pid=${
        small.wxCache("global_login_info")
          ? small.wxCache("global_login_info").uid
          : "0"
      }`,
    };
    mpShare(true, true, "/goods/pages/itemClassGood/index", option);
      window.addEventListener('wxload', (query) => {
        if (query.supplier) {
          this.supplier = query.supplier
          sendData.supplier = query.supplier
        }
        this.getItemClassFun(sendData)
      })
  },
  computed: {
    ...mapGetters(['getNavBar'])
  },
  watch: {
    // 底部导航
    'getNavBar.navBarStyle': function (val) {
      this.handleScrollHeight(val, this.classType)
    }
  },
  mounted() {
    // 小程序需要用 $$getBoundingClientRect() 获取元素宽高 Modified by wuzhiying
    this.$nextTick(() => {
        // TODO 弹窗层级处理
        window.$$subscribe('skuData', (data) => {
          this.skuDialogVisible = true
          this.itemId = data.itemId
        })
    })
  },
  methods: {
    handleScrollHeight(navBarStyle, classType) {
      document.querySelector('#class-wrap-search').$$getBoundingClientRect().then((res) => {
        // res 的内容可以参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/wxml/NodesRef.boundingClientRect.html
        let carBottom = 0
        if (navBarStyle == 1) {
          carBottom = 55
          this.navBarHeight = 55
        } else if (navBarStyle == 0) {
          carBottom = 43
          this.navBarHeight = 43
        } else if (navBarStyle == 2) {
          carBottom = 0
          this.navBarHeight = 0
        }
        if (navBarStyle != 9) {
          if (classType == 9) {
            this.scrollerHeight = window.innerHeight - (res.height + 46 + carBottom)
          } else {
            this.scrollerHeight = window.innerHeight - (res.height + carBottom)
            // 定制新分类 type:12
            if (classType == 12) {
              this.searchOffsetHeight = this.$refs.search.offsetHeight
            }
          }
        } else if (classType == 9) {
          this.scrollerHeight = window.innerHeight - (res.height + 46)
        } else {
          this.scrollerHeight = window.innerHeight - res.height
          // 定制新分类 type:12
          if (classType == 12) {
            this.searchOffsetHeight = this.$refs.search.offsetHeight
          }
        }
      })
    },
    /**
       * 商品价格 整数放大
       */
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    },

    /**
     * 搜索商品
     */
    searchList() {
      const query = this.$route.query
      const data = { title: this.keywords }
      const param = Object.assign(data, query, true)
      this.$JumpName(this, 'item-list', param)
    },

    /**
     * 查看商品详情
     */
    navToDetail(id) {
      this.$JumpName(this, 'item-detail', { detailId: id })
    },

    /**
     * 跳转商品列表
     */
    navToItemList(item) {
      // 如果有自定义链接
      // console.log(item, 'item....')
      if (item.link) {
          openPage(item.link)
      } else if (this.supplier) {
        this.$JumpName(this, 'item-list', { class_id: item.class_id, supplier: this.supplier })
      } else {
        this.$JumpName(this, 'item-list', { class_id: item.class_id })
      }
    },

    /**
     * 获取商品sku
     */
    getItemSku(id) {
      this.skuDialogVisible = true
      this.itemId = id
    },

    /**
     * 带左栏三级分类展示-一级分类
     */
    switchTopItem(id) {
      // console.log('switchTopItem', id)
      this.activeId = id
      const dataSource = [...this.topData]
      this.leftData = dataSource.filter(item => item.class_id == id)[0].child
      // console.log('this.leftData', this.leftData)
      if (this.leftData) {
        this.leftActiveId = this.leftData[0].class_id
        const dataSource = [...this.leftData]
        this.classThreeData = dataSource.filter(item => item.class_id == this.leftActiveId)[0].child
        if (this.classThreeData) {
          this.classThreeId = this.classThreeData[0].class_id
          this.classId = this.classThreeId
          this.getItemListFun(false, 1, this.classThreeId)
        } else {
          this.classId = this.leftActiveId
          this.getItemListFun(false, 1, this.leftActiveId)
        }
      } else {
        this.classThreeData = []
        this.classId = id
        this.getItemListFun(false, 1, id)
      }
    },
    topDrop() {
      this.isShowDropBox = !this.isShowDropBox
      setTimeout(() => {
        if (this.isShowDropBox) {
          document.getElementById('class-wrap-top-dropbox').style.display = 'block'
        } else {
          document.getElementById('class-wrap-top-dropbox').style.display = 'none'
        }
      }, 50)
    },
    isDropBox() {
      this.isShowDropBox = false
    },
    topDropItem(firstClassId, index, twoClassId, threeClassId) {
      const id = firstClassId
      this.activeId = id
      const dataSource = [...this.topData]
      this.leftData = dataSource.filter(item => item.class_id == id)[0].child
      if (this.leftData) {
        this.leftActiveId = (twoClassId && firstClassId && twoClassId !== firstClassId) ? twoClassId : this.leftData[0].class_id
        const dataSource = [...this.leftData]
        this.classThreeData = dataSource.filter(item => item.class_id == this.leftActiveId)[0].child
        if (this.classThreeData) {
          this.classThreeId = (threeClassId !== twoClassId && threeClassId !== firstClassId) ? threeClassId : this.classThreeData[0].class_id
          this.classId = this.classThreeId
          this.getItemListFun(false, 1, this.classThreeId, true)
        } else {
          this.classId = this.leftActiveId
          this.getItemListFun(false, 1, this.leftActiveId, true)
        }
      } else {
        this.classThreeData = []
        this.classId = id
        this.getItemListFun(false, 1, id, true)
      }
      this.isShowDropBox = false
      const oClassWrapNine = this.$refs.classWrapNine
      const jump = document.querySelectorAll('.class-wrap-top-cont-item')
      let total = 0
        jump[index].$$getBoundingClientRect().then((res) => {
          // TODO 稍后处理
        })
      function smoothDown() {
        if (distance < total) {
          distance += step
          oClassWrapNine.scrollLeft = distance
          setTimeout(smoothDown, 10)
        } else {
          oClassWrapNine.scrollLeft = distance
        }
      }
      function smoothUp() {
        if (distance > total) {
          oClassWrapNine.scrollLeft = distance
          setTimeout(smoothUp, 10)
        } else {
          distance -= step
          oClassWrapNine.scrollLeft = total
        }
      }
    },

    /**
     * 切换左侧分类/带左栏三级分类展示-二级分类
     */
    switchClassItem(id) {
      if (this.classType == 9) {
        this.leftActiveId = id
        const dataSource = [...this.leftData]
        this.classThreeData = dataSource.filter(item => item.class_id == id)[0].child
        if (this.classThreeData) {
          this.classThreeId = this.classThreeData[0].class_id
          this.classId = this.classThreeId
          this.getItemListFun(false, 1, this.classThreeId)
        } else {
          this.classId = id
          this.getItemListFun(false, 1, id)
        }
      } else {
        this.activeId = id
        const params = {
          class_id: id,
          supplier: this.supplier
        }
        if (this.classType == 0 || this.classType == 1 || this.classType == 6 || this.classType == 8) {
          this.getItemRightClassFun(params)
        }
        if (this.classType == 4 || this.classType == 10) {
          this.getItemListFun(false, 1, id)
        }
        if (this.classType == 10) {
          this.currentActive = -1
        }
      }
    },

    /**
   * 切换左侧分类/带左栏三级分类展示-三级分类
   */
    classThreeItem(id) {
      this.classThreeId = id
      this.classId = id
      this.getItemListFun(false, 1, id)
    },

    /**
     * 排序搜索
     */
    sortSearchFn(data) {
      // console.log(this.classId)
      if (data.prop == 'price') {
        this.order = data.sort == 'ascending' ? 'priceUp' : 'priceDown'
      } else if (data.prop == 'sales') {
        this.order = data.sort == 'ascending' ? 'salesUp' : 'salesDown'
      } else if (data.prop == 'new') {
        this.order = data.sort == 'ascending' ? 'newUp' : 'newDown'
      } else if (data.prop == 'default') {
        this.order = data.sort == 'ascending' ? 'none' : ''
      }
      this.getItemListFun(false, 1, this.classId)
    },

    /**
     * 获取商品分类数据
     */
    getItemClassFun(sendData) {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      getItemClass(sendData).then((res) => {
        this.$loadingWrap.close()
        if (res.status === 1) {
          this.classType = res.data.is_class_style
          // 定制新分类 type 值 12
          this.dzData = this.classType == 12 ? res.data.lists : []
          const queryClassId = this.$route.query.class_id
          const firstClassId = this.$route.query.first_class_id || queryClassId
          const secondClassId = this.$route.query.second_class_id || queryClassId
          const threeClassId = this.$route.query.three_class_id || queryClassId
          this.handleScrollHeight(this.getNavBar.navBarStyle, this.classType)
          if (this.classType == 9) {
            this.topData = res.data.lists
            this.activeId = firstClassId || res.data.lists[0].class_id
            if (queryClassId) {
              this.leftData = this.topData.filter(item => item.class_id == firstClassId)[0].child
              setTimeout(() => {
                this.topData.forEach((item, index) => {
                  if ((item.class_id == firstClassId && queryClassId != this.leftActiveId && this.$route.query.first_class_id) || (item.class_id == firstClassId && this.$route.query.second_class_id )) {
                      this.topDropItem(firstClassId, index, secondClassId, threeClassId)
                  }
                })
              }, 1000)
            } else {
              this.leftData = this.topData[0].child
            }
            if (this.leftData) {
              this.leftActiveId = this.leftData[0].class_id
              this.classThreeData = this.leftData[0].child
              if (this.classThreeData) {
                this.classThreeId = this.classThreeData[0].class_id
                this.classId = this.classThreeId
              } else {
                this.classId = this.leftActiveId
              }
            } else {
              this.classId = this.activeId
            }
          } else {
            this.leftData = res.data.lists
            this.activeId = queryClassId || res.data.lists[0].class_id
          }
          const rightSend = {}
          rightSend.class_id = this.activeId
          if (this.supplier) {
            rightSend.supplier = this.supplier
          }
          if (this.classType == 0 || this.classType == 1 || this.classType == 6 || this.classType == 8) {
            this.getItemRightClassFun(rightSend)
          }
          if (this.classType == 4 || this.classType == 9 || this.classType == 10) {
            this.loading = true
            this.finished = false
            if (this.classType == 9) {
              this.getItemListFun(false, this.p, this.classId)
            } else {
              this.getItemListFun(false, this.p, this.activeId)
            }
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },

    /**
     * 获取右侧分类数据
     */
    getItemRightClassFun(sendData) {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      getItemClass(sendData).then((res) => {
        this.$loadingWrap.close()
        if (res.status === 1) {
          this.classType = res.data.is_class_style
          if (this.classType == 0 || this.classType == 1 || this.classType == 6 || this.classType == 8) {
            this.rightData = res.data.lists
            if (this.rightData.length == 0) {
              this.finishedText = ''
              this.isShowNoData = true
            } else {
              this.isShowNoData = false
            }
          }
          if (this.classType == 4 || this.classType == 10) {
            this.loading = true
            this.finished = false
            this.getItemListFun(false, 1, sendData.class_id)
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 加载更多
    onLoad() {
      if (this.finished) return false
      this.p += 1
      this.getItemListFun(true, this.p, this.activeId)
    },

    /**
     * 获取商品列表数据
     */
    getItemListFun(onload, p, id) {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      const sendData = {}
      if (onload == false) {
        this.p = 1
        this.goodList = []
        this.finished = false
        this.loading = false
        sendData.p = this.p
      } else {
        sendData.p = p
      }
      if (this.classType == 9) {
        sendData.order = this.order || ''
        sendData.class_id = id
        if (this.p == 1) {
          this.vanList.finished = false
          this.vanList.loading = false
          this.vanList.error = false
        }
      } else {
        sendData.class_id = this.activeId
      }
      // 加上供应商id参数 解决供应商店铺商品分类无数据
      this.supplier ? sendData.supplier = this.supplier : ''
      // console.log(sendData)
      getClassItem(sendData).then((res) => {
        this.$loadingWrap.close()
        if (res.status === 1) {
          if (this.classType == 9) {
            const resData = res.data.data.lists
            if (resData.length <= 0) {
              this.vanList.finished = true
            }
            resData.forEach((item) => {
              if (item.is_compress == 1) {
                item.src = `${item.pic_url}w640`
              } else {
                item.src = item.pic_url
              }
            })
            if (res.data) {
              if (this.p == 1) {
                this.loading = false
                this.otherInfo.earn_alias = res.data.data.earn_alias
                this.otherInfo.is_open_kuajing = res.data.data.is_open_kuajing
                this.otherInfo.is_display_original_price = res.data.data.is_display_original_price
                this.otherInfo.point_name = res.data.data.point_name
                this.goodList = resData
                if (this.goodList.length == 0) {
                  this.isShowNoData = true
                } else {
                  this.isShowNoData = false
                }
              } else {
                this.loading = false
                this.goodList = this.goodList.concat(resData)
              }
            }
          } else {
            const goodList = res.data.data
            if (goodList.length <= 0) {
              this.finished = true
            }
            if (onload == false) {
              this.loading = false
              this.goodList = goodList
              if (this.goodList.length == 0) {
                this.isShowNoData = true
              } else {
                this.isShowNoData = false
              }
            } else if (goodList && goodList.length && this.p != 1) {
              this.loading = false
              this.goodList = this.goodList.concat(goodList)
            } else {
              this.loading = false
              this.finished = true
              return
            }
          }
          this.dhsOriginalPriceShow = res.data.dhs_original_price_class_display
        } else {
          this.$Error(res.msg)
        }
      })
    },

    /**
     * 滑到底部加载
     */
    getData() {
      if (this.vanList.finished) return false
      this.p++
      // console.log('this.classId', this.classId)
      this.getItemListFun(true, this.p, this.classId)
    },
    // 分类商品加购展示
    addCartChange(agr) {
      if (agr[1] == 'reduce' && agr[0] == 0) {
        this.currentActive = -1
      } else {
        const params = {
          num: Number(agr[0]),
          item_id: Number(agr[2]),
          sku_id: agr[3]
        }
        this.$loadingWrap.show()
        setCartItemNum(params).then((res) => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            if (res.data) {
              this.$Error('已加入购物车')
            }
          } else {
            this.$Error(res.msg)
          }
        })
      }
    },
    addShow(goodIndex) {
      this.selNum = 0
      this.currentActive = goodIndex
    }
  }
})
</script>

<style lang="scss">
  @import "src/styles/mixin";
  .miniprogram-root {
    .item-wrapper {
      padding-bottom: 0;
      overflow: hidden;
    }
  }
  .class-wrap {
    width: 100%;
    height: 100vh;
    background-color: #fff;
    box-sizing: border-box;
    padding-top: 116px;
    &-search {
      width: 100%;
      box-sizing: border-box;
      padding: 24px 25px 20px 25px;
      background-color: #fff;
      box-sizing: border-box;
      position: fixed;
      top: 0;
      left: 0;
      max-width: 750px;
      margin: 0 auto;
      right: 0;
      z-index: 100;
      &-cont {
        position: relative;
        width: 100%;
        height: 72px;
        border-radius: 36px;
        font-size: 0;
        background-color: #f7f7f7;
        .icon {
          position: absolute;
          line-height: 72px;
          left: 28px;
          top: 0;
          color: #999999;
          font-size: 28px;
          margin-right: 10px;
          &.miniprogram{
            line-height: initial;
            top: 22px;
          }
          .icon_search, .img_search{
            width: 28px;
            height: 28px;
          }
        }
        @include placeColor(#999);
        input {
          display: inline-block;
          width: 100%;
          height: 100%;
          font-size: 24px;
          padding: 15px 70px;
          border: 0;
          background: transparent;
        }
      }
    }
    &-top{
      position: fixed;
      top: 116px;
      left: 0;
      right: 0;
      max-width: 750px;
      width: 100%;
      padding-bottom: 15px;
      padding-right: 72px;
      margin: 0 auto;
      background-color: #fff;
      border-bottom: 1px solid #ededed;
      z-index: 100;
      &-drop{
        position: absolute;
        right: 0;
        top: 0;
        width: 72px;
        height: 72px;
        line-height: 72px;
        text-align: center;
        background-color: #fff;
        z-index: 101;
        &::before{
          position: absolute;
          right: 72px;
          top: 50%;
          content: '';
          width: 39px;
          height: 72px;
          background: url("https://img.wifenxiao.com/h5-wfx/images/class_shadow.png") no-repeat center/cover;
          z-index: 101;
          -webkit-transform: translateY(-50%);
          -moz-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          -o-transform: translateY(-50%);
          transform: translateY(-50%);
        }
        >img{
          display: inline-block;
          width: 20px;
          height: 20px;
          vertical-align: middle;
          &.drop{
            transform:rotate(180deg);
            -ms-transform:rotate(180deg);
            -moz-transform:rotate(180deg);
            -webkit-transform:rotate(180deg);
            -o-transform:rotate(180deg);
          }
        }
      }
      &-dropbox{
        display: none;
        position: fixed;
        top: 200px;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        max-width: 750px;
        background-color: rgba(0,0,0,.5);
        .class-wrap-top-dropcont{
          position: absolute;
          top: 0;
          left: 0;
          display: flex;
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flexbox;
          align-items: center;
          flex-wrap: wrap;
          width: 100%;
          padding: 30px;
          background-color: #fff;
          z-index: 2024;
          &-item{
            font-size: 26px;
            color: #666;
            width: 200px;
            height: 62px;
            line-height: 62px;
            text-align: center;
            margin-right: 45px;
            margin-bottom: 25px;
            border: 1px solid #d9d9d9;
            border-radius: 30px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            &.active{
              color: #ff0000;
              border-color: #ff0000;
            }
            &:nth-child(3n){
              margin-right: 0;
            }
          }
        }
      }
      &-cont{
        position: relative;
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        align-items: center;
        height: 72px;
        padding-right: 72px;
        overflow-x: scroll;
        background-color: #fff;
        z-index: 100;
        &-item{
          -webkit-box-flex: 1;
          -webkit-flex: 1 0 auto;
          flex: 1 0 auto;
          font-size: 26px;
          color:#333;
          line-height: 72px;
          padding:0 30px;
          >span{
            position: relative;
            display: inline-block;
          }
          &.active {
            font-size:28px;
            font-weight:bold;
            >span{
              &::before {
                content: '';
                width: 100%;
                height: 5px;
                position: absolute;
                left: 0;
                bottom: 0;
                background: -webkit-linear-gradient(to right,rgba(242,11,34,1),rgba(242,11,34,0.1));
                background:linear-gradient(to right,rgba(242,11,34,1),rgba(242,11,34,0.1));
              }
            }
          }
        }
      }
    }
    &-cont {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-around;
      &.classType_nine{
        padding-top: 89px;
        overflow: hidden;
        .class-wrap-cont-right{
          overflow-y: visible;
        }
      }
      &-left {
          width: 25%;
          background-color: #F7F7F7;
          height: auto;
          overflow-y: scroll;
          .class-left-cont {
            height:100%;
            &-item {
              cursor: pointer;
              position: relative;
              width: 100%;
              height: 96px;
              line-height: 96px;
              text-align: center;
              font-size: 26px;
              color: #666;
              >span{
                display: block;
                line-height: 96px;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
              }
              &.active {
                background-color: #fff;
                color: #333;
                font-weight: bold;
                >span{
                  padding-left: 28px;
                }
              }
              &.active::before {
                position: absolute;
                top: 50%;
                left: 0;
                transform: translate(0, -50%);
                content: '';
                width:6px;
                height:28px;
                background:linear-gradient(0deg,rgba(233,1,4,1),rgba(254,27,73,1));
                box-shadow:3px 0px 10px 0px rgba(235,3,9,0.2);
                border-radius:0px 6px 6px 0px;
              }
            }
          }
      }
      &-right {
        position: relative;
          width: 75%;
          height: auto;
          overflow-y: scroll;
          .class-level6 {
            &-item {
              margin-bottom: 29px;
              &-name {
                font-size: 28px;
                font-weight: bold;
                line-height: 40px;
                margin-top: 16px;
                padding-left: 30px;
              }
              &-cont {
                width: 100%;
                box-sizing: border-box;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                align-content: space-around;
                padding: 30px 30px 0;
                &-item {
                  width: 240px;
                  height: 72px;
                  background-color: #F7F7F7;
                  color: #656565;
                  padding-left: 30px;
                  box-sizing: border-box;
                  margin-right: 20px;
                  @include lineClamp(26px, 72px, 1);
                  margin-bottom: 20px;
                  &:nth-child(2n) {
                    margin-right: 0;
                  }
                }
                .class-level8-item {
                  margin-bottom: 50px;
                  margin-right: 36px;
                  &:nth-child(3n) {
                    margin-right: 0;
                  }
                  .img {
                    width: 136px;
                    height: 136px;
                    img {
                      width: 100%;
                      height: 100%;
                    }
                  }
                  .name {
                    font-weight: 500;
                    // font-size: 24px;
                    color: #666;
                    width: 136px;
                    text-align: center;
                    margin-top: 25px;
                    @include lineClamp(24px, 1.2, 1);
                  }
                }
              }
            }
          }
          .class-level0 {
            width: 100%;
            padding: 0px 30px;
            box-sizing: border-box;
            &-item {
              position: relative;
              width: 100%;
              padding: 20px 0px;
              border-bottom: 1px solid #EDEDED;
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              align-content: space-around;
              box-sizing: border-box;

              .img {
                width: 52px;
                height: 52px;
                margin-right: 20px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .name {
                width: calc(100% - 77px);
                color: #666;
                font-weight: 500;
                @include lineClamp(26px, 52px, 1);
              }
              .arrow {
                position: absolute;
                right: 0px;
                top: 50%;
                transform: translate(0, -50%);
                width: 9px;
                height: 16px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
          .class-level1 {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: space-around;
            padding: 30px 40px 0;

            &-item {
              margin-bottom: 50px;
              margin-right: 36px;
              &:nth-child(3n) {
                margin-right: 0;
              }
              .img {
                width: 136px;
                height: 136px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .name {
                width: 136px;
                margin-top: 25px;
                color: #666;
                font-weight: 500;
                text-align: center;
                @include lineClamp(24px, 1.2, 1);
              }
            }
          }
          .class-level4 {
            width: 100%;
            height:100%;
            padding: 0 30px;
            box-sizing: border-box;
            .class-level4-list{
              height:100%;
            }
            &-item {
              width: 100%;
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-content: space-around;
              border-bottom: 1px solid #EDEDED;
              padding: 20px 0;
              &-img {
                width: 126px;
                height: 126px;
                margin-right: 14px;
                overflow: hidden;
                position: relative;
                &.imgBorder{
                  border: 2px solid #e0e0e0;
                }
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              &-cont {
                position: relative;
                width: calc(100% - 140px);
                .title {
                  width: 100%;
                  font-weight: 500;
                  @include lineClamp(26px, 1.4, 2)
                }
                .cont_box{
                  position: absolute;
                  bottom: 0;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  width: 100%;
                  .right_box{
                    .right {
                      width: 56px;
                      height: 56px;
                      img {
                        width: 100%;
                        height: 100%;
                      }
                    }
                    .add_cart{
                      .right_ten{
                        font-size: 24px;
                        color: #fff;
                        line-height: 34px;
                        text-align: center;
                        padding: 4px 24px;
                        background-color: #E90104;
                        border-radius: 22px;
                      }
                      .icon {
                        width: 40px;
                        height: 40px;
                        img{
                          max-width: 100%;
                          width: 100%;
                        }
                      }
                    }
                  }
                }
              }
              &:last-child {
                border: 0;
              }
            }

          }
          .sort{
            position: relative;
            background-color: #fff;
            margin: 20px 0;
          }
          .class-level9{
            position: relative;
            max-width: 750px;
            padding: 0 30px 10px;
            z-index: 1;
            &-cont{
              display: flex;
              display: -webkit-flex;
              display: -moz-flex;
              display: -ms-flexbox;
              align-items: center;
              overflow-x: scroll;
              overflow-y: hidden;
              &-item{
                -webkit-box-flex: none;
                -ms-flex: none;
                flex: none;
                font-size: 22px;
                color: #666;
                height: 46px;
                line-height: 46px;
                text-align: center;
                margin-right: 10px;
                padding: 0 22px;
                border: 1px solid #ccc;
                border-radius: 23px;
                &.active{
                  color: #f20e25;
                  border-color: #f20e25;
                }
              }
            }
          }
          .list-wrapper-app{
            position: absolute;
            overflow-y: scroll;
            width: 100%;
            height: calc(100% - 174px);
          }
      }
    }
    &-level {
      width: 100%;
      box-sizing: border-box;
      padding: 0px 30px;
      background-color: #fff;
      &-level2 {
        &-item {
          margin-bottom: 39px;
          .level-title {
            font-size: 28px;
            font-weight: bold;
            margin-top: 14px;
            margin-bottom: 30px;
          }
          .level-cont {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: space-around;
            &-item {
              width: 216px;
              height: 72px;
              background-color: #F7F7F7;
              color: #666;
              padding-left: 30px;
              box-sizing: border-box;
              margin-right: 20px;
              @include lineClamp(26px, 72px, 1);
              margin-bottom: 20px;
              &:nth-child(3n) {
                margin-right: 0;
              }
            }
          }
        }
      }
      &-level3 {
        width: 100%;
        box-sizing: border-box;
        .level3-cont {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          align-content: space-around;
          &-item {
            margin-bottom: 60px;
            margin-right: 46px;
            &:nth-child(4n) {
              margin-right: 0;
            }
            .img {
              width: 138px;
              height: 138px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .name {
              width: 138px;
              margin-top: 20px;
              color: #666;
              font-weight: 500;
              text-align: center;
              @include lineClamp(24px, 1.2, 1);
            }
          }
        }
      }
      &-level7 {
        width: 100%;
        box-sizing: border-box;
        &-item {
          margin-bottom: 39px;
          .level-title {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 30px;
            margin-top: 18px;
          }
          .level-cont {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: space-around;
            &-item {
              width: 335px;
              height: 72px;
              background-color: #F7F7F7;
              color: #666;
              padding-left: 30px;
              box-sizing: border-box;
              margin-right: 20px;
              @include lineClamp(26px, 72px, 1);
              margin-bottom: 20px;
              &:nth-child(2n) {
                margin-right: 0;
              }
            }
          }
        }
      }
    }
  }
  .miniprogram-root{
    .class-wrap-cont-right .class-level4 .wx-scroll-view{
      li:last-child{
        margin-bottom: 50px;
      }
    }
  }
  .item-sold-bg {
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
    background:#fff;
    opacity: 0.4;
  }
  .item-sold-out{
    position:absolute;
    top: 20px;
    left: -46px;
    width:180px;
    height:50px;
    line-height:50px;
    transform:rotate(-45deg);
    font-size:24px;
    text-align:center;
    color:#fff;
    background:#000;
    opacity: 0.5;
    zoom: .8
  }
</style>
